<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首屏优化</title>
</head>

<body>
  <script>
    /**
     * 参考文献 https://segmentfault.com/a/1190000019499007
      以vue-cli3为例 
      //依赖
      npm install webpack-bundle-analyzer –save-dev
      //添加webpack配置文件
      chainWebpack: (config) => {
      if (process.env.NODE_ENV === 'production') {
          if (process.env.npm_config_report) {
              config
                  .plugin('webpack-bundle-analyzer')
                  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                  .end();
              config.plugins.delete('prefetch')
          }
      } }
      //运行
      npm run build --report
      //即可看到项目各个文件的体积

      1.路由懒加载
      import login from '@/components/login'
      routes:[ path: 'login', name: 'login', component: login ]
      修改为
      routes:[ path: 'login',name: 'login',component: () => import('./components/login.vue')
    
      2.第三方组件按需引入

      3.重复组件打包处理

      4.小图片base64处理减少请求

      5.打包为gzip

      6.小Css太多的话可以设置打包为一份js

      7.去掉map文件
    */
  </script>
</body>

</html>